<template>
  <div class="inventory-warning">
    <div class="page-header">
      <h2>库存预警</h2>
      <div class="header-actions">
        <el-button type="primary" @click="refreshData">
          <i class="el-icon-refresh"></i> 刷新数据
        </el-button>
        <el-button type="success" @click="exportWarnings">
          <i class="el-icon-download"></i> 导出预警
        </el-button>
        <el-button type="warning" @click="batchPurchase">
          <i class="el-icon-shopping-cart-full"></i> 批量采购
        </el-button>
      </div>
    </div>
    
    <el-card shadow="hover" class="filter-card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="SKU编码">
          <el-input v-model="filterForm.sku" placeholder="SKU编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="SKU名称">
          <el-input v-model="filterForm.name" placeholder="SKU名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="filterForm.category" placeholder="分类" clearable>
            <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预警级别">
          <el-select v-model="filterForm.warningLevel" placeholder="预警级别" clearable>
            <el-option label="警告" value="warning"></el-option>
            <el-option label="紧急" value="critical"></el-option>
            <el-option label="缺货" value="outOfStock"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card shadow="hover" class="warning-summary-card">
      <div class="warning-summary">
        <div class="summary-item warning">
          <div class="summary-icon">
            <i class="el-icon-warning"></i>
          </div>
          <div class="summary-content">
            <div class="summary-title">警告</div>
            <div class="summary-value">{{ warningCount }}</div>
            <div class="summary-desc">库存接近最低限制</div>
          </div>
        </div>
        <div class="summary-item critical">
          <div class="summary-icon">
            <i class="el-icon-warning-outline"></i>
          </div>
          <div class="summary-content">
            <div class="summary-title">紧急</div>
            <div class="summary-value">{{ criticalCount }}</div>
            <div class="summary-desc">库存低于最低限制</div>
          </div>
        </div>
        <div class="summary-item out-of-stock">
          <div class="summary-icon">
            <i class="el-icon-sold-out"></i>
          </div>
          <div class="summary-content">
            <div class="summary-title">缺货</div>
            <div class="summary-value">{{ outOfStockCount }}</div>
            <div class="summary-desc">库存为零</div>
          </div>
        </div>
        <div class="summary-item total-warning">
          <div class="summary-icon">
            <i class="el-icon-data-analysis"></i>
          </div>
          <div class="summary-content">
            <div class="summary-title">总计</div>
            <div class="summary-value">{{ totalWarningCount }}</div>
            <div class="summary-desc">需要处理的SKU</div>
          </div>
        </div>
      </div>
    </el-card>
    
    <el-card shadow="hover" class="table-card">
      <div class="table-operations">
        <span class="total-count">共 {{ total }} 条记录</span>
        <el-select v-model="batchAction" placeholder="批量操作" size="small" style="width: 120px">
          <el-option label="批量入库" value="inbound"></el-option>
          <el-option label="批量采购" value="purchase"></el-option>
          <el-option label="批量导出" value="export"></el-option>
        </el-select>
        <el-button size="small" type="primary" :disabled="!selectedSkus.length" @click="handleBatchAction">
          执行
        </el-button>
      </div>
      
      <el-table
        :data="warningSkus"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        :row-class-name="getRowClassName"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="image" label="图片" width="80">
          <template slot-scope="scope">
            <el-image 
              style="width: 50px; height: 50px" 
              :src="scope.row.image" 
              :preview-src-list="[scope.row.image]"
              fit="contain"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="sku" label="SKU编码" width="150"></el-table-column>
        <el-table-column prop="name" label="SKU名称" min-width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="category" label="分类" width="120"></el-table-column>
        <el-table-column label="库存状态" width="180">
          <template slot-scope="scope">
            <div class="stock-status">
              <div class="stock-numbers">
                <span class="current-stock">{{ scope.row.stock }}</span>
                <span class="stock-separator">/</span>
                <span class="min-stock">{{ scope.row.minStock }}</span>
              </div>
              <el-progress 
                :percentage="getStockPercentage(scope.row)" 
                :status="getProgressStatus(scope.row.stockStatus)"
                :stroke-width="10"
                :show-text="false"
              ></el-progress>
              <el-tag :type="getStockStatusType(scope.row.stockStatus)" size="small">
                {{ getStockStatusText(scope.row.stockStatus) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="lastUpdate" label="最后更新" width="170"></el-table-column>
        <el-table-column prop="suggestedPurchase" label="建议采购" width="100">
          <template slot-scope="scope">
            <span class="suggested-purchase">{{ getSuggestedPurchase(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleInbound(scope.row)">入库</el-button>
            <el-button size="mini" type="warning" @click="handlePurchase(scope.row)">采购</el-button>
            <el-button size="mini" type="info" @click="viewDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    
    <!-- 入库对话框 -->
    <el-dialog title="SKU入库" :visible.sync="inboundDialogVisible" width="40%">
      <div class="sku-info" v-if="currentSku">
        <el-image :src="currentSku.image" style="width: 60px; height: 60px" fit="contain"></el-image>
        <div class="sku-details">
          <h3>{{ currentSku.name }}</h3>
          <p>SKU: {{ currentSku.sku }}</p>
          <div class="sku-stock-info">
            <span>当前库存: {{ currentSku.stock }}</span>
            <el-tag :type="getStockStatusType(currentSku.stockStatus)" size="small">
              {{ getStockStatusText(currentSku.stockStatus) }}
            </el-tag>
          </div>
        </div>
      </div>
      
      <el-form :model="inboundForm" :rules="inboundRules" ref="inboundForm" label-width="100px" class="inbound-form">
        <el-form-item label="入库数量" prop="quantity">
          <el-input-number v-model="inboundForm.quantity" :min="1" :max="9999"></el-input-number>
        </el-form-item>
        <el-form-item label="入库类型" prop="type">
          <el-select v-model="inboundForm.type" placeholder="请选择入库类型">
            <el-option label="采购入库" value="purchase"></el-option>
            <el-option label="退货入库" value="return"></el-option>
            <el-option label="调拨入库" value="transfer"></el-option>
            <el-option label="其他入库" value="other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作人" prop="operator">
          <el-input v-model="inboundForm.operator" placeholder="请输入操作人"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="inboundForm.remark" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="inboundDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitInbound">确 定</el-button>
      </div>
    </el-dialog>
    
    <!-- 采购对话框 -->
    <el-dialog :title="isBatchPurchase ? '批量采购' : 'SKU采购'" :visible.sync="purchaseDialogVisible" width="50%">
      <div v-if="!isBatchPurchase && currentSku" class="sku-info">
        <el-image :src="currentSku.image" style="width: 60px; height: 60px" fit="contain"></el-image>
        <div class="sku-details">
          <h3>{{ currentSku.name }}</h3>
          <p>SKU: {{ currentSku.sku }}</p>
          <div class="sku-stock-info">
            <span>当前库存: {{ currentSku.stock }}</span>
            <el-tag :type="getStockStatusType(currentSku.stockStatus)" size="small">
              {{ getStockStatusText(currentSku.stockStatus) }}
            </el-tag>
          </div>
        </div>
      </div>
      
      <div v-if="isBatchPurchase" class="batch-purchase-list">
        <div v-for="(sku, index) in selectedSkus" :key="sku.id" class="batch-purchase-item">
          <el-image :src="sku.image" class="batch-purchase-image" fit="contain"></el-image>
          <div class="batch-purchase-info">
            <div class="batch-purchase-name">{{ sku.name }}</div>
            <div class="batch-purchase-sku">{{ sku.sku }}</div>
          </div>
          <el-input-number 
            v-model="sku.purchaseQuantity" 
            :min="1" 
            :max="9999" 
            size="small"
            class="batch-purchase-quantity"
            @change="updateTotalQuantity"
          ></el-input-number>
        </div>
      </div>
      
      <el-form :model="purchaseForm" :rules="purchaseRules" ref="purchaseForm" label-width="100px" class="purchase-form">
        <el-form-item label="采购数量" prop="quantity">
          <el-input-number 
            v-model="purchaseForm.quantity" 
            :min="1" 
            :max="99999"
            :disabled="isBatchPurchase"
          ></el-input-number>
          <span v-if="isBatchPurchase" class="form-tip">总数量由各SKU采购数量自动计算</span>
        </el-form-item>
        <el-form-item label="供应商" prop="supplier">
          <el-input v-model="purchaseForm.supplier" placeholder="请输入供应商"></el-input>
        </el-form-item>
        <el-form-item label="预计到货" prop="expectedDate">
          <el-date-picker
            v-model="purchaseForm.expectedDate"
            type="date"
            placeholder="选择预计到货日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="采购员" prop="purchaser">
          <el-input v-model="purchaseForm.purchaser" placeholder="请输入采购员"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="purchaseForm.remark" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="purchaseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPurchase">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'InventoryWarningView',
  data() {
    return {
      filterForm: {
        sku: '',
        name: '',
        category: '',
        warningLevel: ''
      },
      categories: [
        { value: 'electronics', label: '电子产品' },
        { value: 'clothing', label: '服装' },
        { value: 'home', label: '家居' },
        { value: 'kitchen', label: '厨房' },
        { value: 'tools', label: '工具' }
      ],
      warningSkus: [],
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      selectedSkus: [],
      batchAction: '',
      
      // 预警统计
      warningCount: 0,
      criticalCount: 0,
      outOfStockCount: 0,
      totalWarningCount: 0,
      
      // 入库相关
      inboundDialogVisible: false,
      currentSku: null,
      inboundForm: {
        quantity: 1,
        type: 'purchase',
        date: new Date().toLocaleString(),
        operator: '',
        remark: ''
      },
      inboundRules: {
        quantity: [
          { required: true, message: '请输入入库数量', trigger: 'blur' },
          { type: 'number', min: 1, message: '入库数量必须大于0', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择入库类型', trigger: 'change' }
        ],
        operator: [
          { required: true, message: '请输入操作人', trigger: 'blur' }
        ]
      },
      
      // 采购相关
      purchaseDialogVisible: false,
      isBatchPurchase: false,
      purchaseForm: {
        quantity: 1,
        supplier: '',
        expectedDate: '',
        purchaser: '',
        remark: ''
      },
      purchaseRules: {
        quantity: [
          { required: true, message: '请输入采购数量', trigger: 'blur' },
          { type: 'number', min: 1, message: '采购数量必须大于0', trigger: 'blur' }
        ],
        supplier: [
          { required: true, message: '请输入供应商', trigger: 'blur' }
        ],
        expectedDate: [
          { required: true, message: '请选择预计到货日期', trigger: 'change' }
        ],
        purchaser: [
          { required: true, message: '请输入采购员', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchWarningSkus();
  },
  methods: {
    fetchWarningSkus() {
      this.loading = true;
      // 模拟API请求
      setTimeout(() => {
        // 模拟数据
        this.warningSkus = [
          {
            id: 1,
            sku: 'SKU001',
            name: '苹果手机充电器',
            category: '电子产品',
            stock: 8,
            minStock: 10,
            stockStatus: 'warning',
            lastUpdate: '2023-05-15 09:30:22',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 2,
            sku: 'SKU002',
            name: '三星手机保护壳',
            category: '电子产品',
            stock: 3,
            minStock: 15,
            stockStatus: 'critical',
            lastUpdate: '2023-05-14 16:45:10',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 3,
            sku: 'SKU003',
            name: '蓝牙耳机',
            category: '电子产品',
            stock: 0,
            minStock: 20,
            stockStatus: 'outOfStock',
            lastUpdate: '2023-05-13 11:20:35',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 4,
            sku: 'SKU004',
            name: '笔记本电脑包',
            category: '电子产品',
            stock: 5,
            minStock: 8,
            stockStatus: 'warning',
            lastUpdate: '2023-05-12 14:15:40',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 5,
            sku: 'SKU005',
            name: '机械键盘',
            category: '电子产品',
            stock: 2,
            minStock: 10,
            stockStatus: 'critical',
            lastUpdate: '2023-05-11 10:05:18',
            image: 'https://via.placeholder.com/100'
          }
        ];
        
        // 过滤数据
        if (this.filterForm.sku) {
          this.warningSkus = this.warningSkus.filter(item => 
            item.sku.toLowerCase().includes(this.filterForm.sku.toLowerCase())
          );
        }
        
        if (this.filterForm.name) {
          this.warningSkus = this.warningSkus.filter(item => 
            item.name.toLowerCase().includes(this.filterForm.name.toLowerCase())
          );
        }
        
        if (this.filterForm.category) {
          this.warningSkus = this.warningSkus.filter(item => 
            item.category === this.filterForm.category
          );
        }
        
        if (this.filterForm.warningLevel) {
          this.warningSkus = this.warningSkus.filter(item => 
            item.stockStatus === this.filterForm.warningLevel
          );
        }
        
        // 更新统计数据
        this.warningCount = this.warningSkus.filter(item => item.stockStatus === 'warning').length;
        this.criticalCount = this.warningSkus.filter(item => item.stockStatus === 'critical').length;
        this.outOfStockCount = this.warningSkus.filter(item => item.stockStatus === 'outOfStock').length;
        this.totalWarningCount = this.warningCount + this.criticalCount + this.outOfStockCount;
        
        this.total = this.warningSkus.length;
        this.loading = false;
      }, 500);
    },
    handleFilter() {
      this.currentPage = 1;
      this.fetchWarningSkus();
    },
    resetFilter() {
      this.filterForm = {
        sku: '',
        name: '',
        category: '',
        warningLevel: ''
      };
      this.fetchWarningSkus();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchWarningSkus();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchWarningSkus();
    },
    handleSelectionChange(val) {
      this.selectedSkus = val;
    },
    refreshData() {
      this.fetchWarningSkus();
      this.$message.success('数据已刷新');
    },
    getRowClassName({row}) {
      return `warning-row-${row.stockStatus}`;
    },
    handleBatchAction() {
      if (!this.batchAction) {
        this.$message.warning('请选择批量操作类型');
        return;
      }
      
      if (!this.selectedSkus.length) {
        this.$message.warning('请至少选择一个SKU');
        return;
      }
      
      if (this.batchAction === 'inbound') {
        // 批量入库逻辑
        this.$message.success(`已对 ${this.selectedSkus.length} 个SKU执行批量入库操作`);
      } else if (this.batchAction === 'purchase') {
        // 批量采购逻辑
        this.batchPurchase();
      } else if (this.batchAction === 'export') {
        // 批量导出逻辑
        this.exportWarnings();
      }
    },
    exportWarnings() {
      // 模拟导出
      this.$message.success('预警数据导出成功');
    },
    batchPurchase() {
      if (!this.selectedSkus.length) {
        // 如果没有选中的SKU，则选择所有预警SKU
        this.selectedSkus = [...this.warningSkus];
        // 为每个SKU添加采购数量属性
        this.selectedSkus.forEach(sku => {
          this.$set(sku, 'purchaseQuantity', this.getSuggestedPurchase(sku));
        });
      }
      
      this.isBatchPurchase = true;
      this.purchaseForm = {
        quantity: 0, // 会通过updateTotalQuantity更新
        supplier: '',
        expectedDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 默认7天后
        purchaser: '',
        remark: ''
      };
      
      this.updateTotalQuantity();
      this.purchaseDialogVisible = true;
    },
    handleInbound(row) {
      this.currentSku = row;
      this.inboundForm = {
        quantity: 1,
        type: 'purchase',
        date: new Date().toLocaleString(),
        operator: '',
        remark: ''
      };
      this.inboundDialogVisible = true;
    },
    submitInbound() {
      this.$refs.inboundForm.validate((valid) => {
        if (valid) {
          // 模拟提交
          setTimeout(() => {
            this.$message.success(`成功入库 ${this.inboundForm.quantity} 个 ${this.currentSku.name}`);
            this.inboundDialogVisible = false;
            // 更新当前SKU的库存
            const index = this.warningSkus.findIndex(item => item.id === this.currentSku.id);
            if (index !== -1) {
              this.warningSkus[index].stock += this.inboundForm.quantity;
              // 更新库存状态
              if (this.warningSkus[index].stock > this.warningSkus[index].minStock) {
                this.warningSkus[index].stockStatus = 'sufficient';
                // 从预警列表中移除
                this.warningSkus.splice(index, 1);
              } else if (this.warningSkus[index].stock === this.warningSkus[index].minStock) {
                this.warningSkus[index].stockStatus = 'warning';
              } else if (this.warningSkus[index].stock > 0) {
                this.warningSkus[index].stockStatus = 'critical';
              }
              
              // 更新预警统计
              this.warningCount = this.warningSkus.filter(item => item.stockStatus === 'warning').length;
              this.criticalCount = this.warningSkus.filter(item => item.stockStatus === 'critical').length;
              this.outOfStockCount = this.warningSkus.filter(item => item.stockStatus === 'outOfStock').length;
              this.totalWarningCount = this.warningCount + this.criticalCount + this.outOfStockCount;
              this.total = this.warningSkus.length;
            }
          }, 500);
        } else {
          return false;
        }
      });
    },
    handlePurchase(row) {
      this.currentSku = row;
      this.isBatchPurchase = false;
      this.purchaseForm = {
        quantity: this.getSuggestedPurchase(row),
        supplier: '',
        expectedDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 默认7天后
        purchaser: '',
        remark: ''
      };
      this.purchaseDialogVisible = true;
    },
    submitPurchase() {
      this.$refs.purchaseForm.validate((valid) => {
        if (valid) {
          // 模拟提交
          setTimeout(() => {
            if (this.isBatchPurchase) {
              this.$message.success(`已成功创建批量采购单，包含 ${this.selectedSkus.length} 个SKU`);
            } else {
              this.$message.success(`已成功创建 ${this.currentSku.name} 的采购单`);
            }
            this.purchaseDialogVisible = false;
          }, 500);
        } else {
          return false;
        }
      });
    },
    updateTotalQuantity() {
      // 更新批量采购的总数量
      let total = 0;
      this.selectedSkus.forEach(sku => {
        total += sku.purchaseQuantity || 0;
      });
      this.purchaseForm.quantity = total;
    },
    viewDetail(row) {
      // 查看SKU详情
      this.$router.push(`/inventory/sku`);
      this.$message.info(`查看SKU: ${row.name} 的详情`);
    },
    getStockStatusType(status) {
      const types = {
        sufficient: 'success',
        warning: 'warning',
        critical: 'danger',
        outOfStock: 'info'
      };
      return types[status] || 'info';
    },
    getStockStatusText(status) {
      const texts = {
        sufficient: '充足',
        warning: '警告',
        critical: '紧急',
        outOfStock: '缺货'
      };
      return texts[status] || '未知';
    },
    getProgressStatus(status) {
      const statusMap = {
        sufficient: '',
        warning: 'warning',
        critical: 'exception',
        outOfStock: 'exception'
      };
      return statusMap[status] || '';
    },
    getStockPercentage(row) {
      if (row.minStock === 0) return 100;
      const percentage = (row.stock / row.minStock) * 100;
      return percentage > 100 ? 100 : percentage;
    },
    getSuggestedPurchase(row) {
      // 计算建议采购数量：最低库存的2倍 - 当前库存
      const suggested = (row.minStock * 2) - row.stock;
      return suggested > 0 ? suggested : row.minStock;
    }
  }
}
</script> 

<style scoped>
.inventory-warning {
  padding: 20px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.page-header h2 {
  margin: 0;
  font-size: 22px;
  color: #303133;
}
.header-actions {
  display: flex;
  gap: 10px;
}
.filter-card {
  margin-bottom: 20px;
}
.filter-form {
  display: flex;
  flex-wrap: wrap;
}
.warning-summary-card {
  margin-bottom: 20px;
}
.warning-summary {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}
.summary-item {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.summary-icon {
  font-size: 36px;
  margin-right: 15px;
}
.summary-content {
  flex: 1;
}
.summary-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 5px;
}
.summary-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}
.summary-desc {
  font-size: 12px;
  color: #909399;
}
.warning .summary-icon {
  color: #e6a23c;
}
.warning .summary-value {
  color: #e6a23c;
}
.critical .summary-icon {
  color: #f56c6c;
}
.critical .summary-value {
  color: #f56c6c;
}
.out-of-stock .summary-icon {
  color: var(--text-secondary);
}
.out-of-stock .summary-value {
  color: var(--text-secondary);
}
.total-warning .summary-icon {
  color: var(--primary-color);
}
.total-warning .summary-value {
  color: var(--primary-color);
}
.table-card {
  margin-bottom: 20px;
}
.table-operations {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.total-count {
  margin-right: auto;
  color: var(--text-secondary);
  font-size: 14px;
}
.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.stock-status {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.stock-numbers {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 3px;
}
.current-stock {
  font-weight: bold;
  font-size: 16px;
}
.stock-separator {
  margin: 0 5px;
  color: #909399;
}
.min-stock {
  color: var(--text-secondary);
}
.suggested-purchase {
  font-weight: bold;
  color: var(--primary-color);
}
.warning-row-warning {
  background-color: rgba(255, 159, 46, 0.1);
}
.warning-row-critical {
  background-color: rgba(255, 71, 87, 0.1);
}
.warning-row-outOfStock {
  background-color: rgba(140, 158, 255, 0.1);
}
.sku-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
.sku-details {
  margin-left: 15px;
}
.sku-details h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
}
.sku-details p {
  margin: 0;
  font-size: 14px;
  color: #606266;
}
.sku-stock-info {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.sku-stock-info .el-tag {
  margin-left: 10px;
}
.batch-purchase-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}
.batch-purchase-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}
.batch-purchase-item:last-child {
  border-bottom: none;
}
.batch-purchase-image {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.batch-purchase-info {
  flex: 1;
}
.batch-purchase-name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 3px;
}
.batch-purchase-sku {
  font-size: 12px;
  color: #606266;
}
.batch-purchase-quantity {
  width: 100px;
  margin-left: 10px;
}
.form-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}
</style>